<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>

<body>
    <div id="app">
        <h4>style属性的绑定</h4>
        <pre>
        h5 规范中 style的行内样式有效取值 ： 样式名:样式值;……  字符串格式
        vue v-bind 完成 style绑定时，提供 三种有效变量取值 ( vue会自动更具类型完成样式格式转换 )
            + String : 保留原始style的取值规范
            + Object : 使用JS 中DOM对象的 style 操作规范进行行内样式绑定
                       以对象key作为样式名，对象value作为样式值进行定义
            + Array : 组合多对象样式
        
        v-bind对style的属性绑定是vue中指令操作属性时，唯二的可以完成动静结合绑定操作的
        </pre>
        <p style="font-size:20px;color:red;font-weight: bold;border: 4px solid #333;background-color: #dedede;">
            参考-字体大小-字体颜色-字体宽度-边框-背景</p>
        <p :style="styleStr">参考-字体大小-字体颜色-字体宽度-边框-背景 => v-bind:style="string变量值"</p>
        <input type="button" value="删除样式" @click=" styleStr='' ">
        <!-- <input type="button" value="设置背景颜色为透明" @click=" styleStr+='background-color:transparent' "> -->
        <br>
        <p :style="styleObj">参考-字体大小-字体颜色-字体宽度-边框-背景 => v-bind:style="string变量值"</p>
        <input type="color" @input=" styleObj.color = $event.target.value ">
        <input type="range" min="12" step="1" max="30" @input=" styleObj.fontSize = $event.target.value+'px' ">
        <input type="button" value="添加边框" @click="addBorder()">
        <input type="button" value="删除边框" @click="removeBorder()">
        <input type="button" value="删除背景" @click="removeBc()">
        <input type="button" value="添加背景" @click="addBc()">
        <hr>
        <p :style=" styleObj1 ">参考-字体大小-字体颜色</p>
        <p :style=" styleObj2 ">参考-边框-背景</p>
        <p :style=" [ styleObj1,styleObj2 ] ">参考-字体大小-字体颜色-边框-背景</p>

        <hr>
        <p :id="id" id="a" >id</p>
        <p :style=" styleObj1 " style="border: 3px solid black;background-color: #dedede;">参考-字体大小-字体颜色-边框-背景</p>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    id:"b",
                    styleStr: "font-size:20px;color:red;font-weight: bold;border: 4px solid #333;background-color: #dedede;",
                    styleObj: {
                        fontSize:"20px",
                        color:"red",
                        "background-color": "#dedede"
                    },
                    styleObj1:{
                        fontSize:"20px",
                        color:"red"
                    },
                    styleObj2:{
                        border: "4px solid #333",
                        backgroundColor: "#dedede"
                    }
                }
            },
            methods: {
                addBorder(){
                    this.styleObj.border = "4px solid black";
                },
                removeBorder(){
                    this.styleObj.border = "";
                },
                removeBc(){
                    this.styleObj["background-color"] = "";
                },
                addBc(){
                    this.styleObj["background-color"] = "#dedede";
                }
            }
        }).mount("#app");
    </script>
</body>

</html>